<template>
  <div class="listItem">
    <div class="listItem-label">{{ label }}</div>
    <div class="listItem-value">{{ value }}</div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  label: {
    type: String,
    default: ""
  },
  value: {
    type: String,
    default: ""
  }
});
</script>
<style lang="scss" scoped>
.listItem {
  display: flex;
  padding: 5px 0;
  font-size: 12px;

  .listItem-label {
    width: 60px;
    margin-right: 12px;
    color: var(--color-grep-4);
    text-align: left;
    word-break: break-all;
    word-wrap: break-word;
    box-sizing: border-box;
    flex: none;
  }

  .newLabelStyle {
    margin-right: 17px;
    color: var(--color-grep-4);
    text-align: left;

    // width: 120rpx;
    box-sizing: border-box;
    flex: none;

    // word-wrap: break-word;
    // word-break: break-all;
  }

  .listItem-value {
    width: 60px;
    margin-right: 12px;
    overflow: hidden;
    color: var(--color-grep-8);
    text-align: left;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    white-space: nowrap;
    box-sizing: border-box;
    flex: 1;
  }

  .newValueStyle {
    width: 60px;
    margin-right: 12px;
    color: var(--color-grep-8);
    text-align: left;
    box-sizing: border-box;
    flex: 1;

    // word-wrap: break-word;
    // word-break: break-all;
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
  }
}
</style>
